<template>
    <!-- 质量 -->
    <div class="main">
        <div class="left">
            <div class="cent1">
                <div class="ml_32 p16">
                    <div class="ddd" style="display:flex">
                        <el-progress
                            type="circle"
                            :format="format"
                            color="#33e6ff"
                            :percentage="100"
                            :width="82"
                            :stroke-width="width"
                            style="margin-right: 37px"
                        ></el-progress>
                        <div style="margin-right:24px">
                            <p
                                class="ml16"
                                style="color: #1A9BFE;font-size:28px;margin-left: 5px;"
                            >{{ CountMonitoring }}个</p>
                            <p class="ft18" style="margin-bottom:10px">摄像头在线</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="cent">
                <div class="p16">
                    <p class="aaaa">摄像头列表</p>
                    <div>
                        <div v-for="(item,index) in list" :key="index">
                            <img src="../assets/img/page/page09/icons.png" alt srcset />
                            <p class="f0">{{ item.monitoringName }}</p>
                        </div>
                    </div>
                    <div class="aflex">
                        <img
                            src="../assets/img/page/page09/leftIcon.png"
                            width="27px"
                            height="27px"
                            @click="back()"
                        />

                        <p>{{ temp.pageNo }} / 4</p>

                        <img
                            src="../assets/img/page/page09/rightIcon.png"
                            width="27px"
                            height="27px"
                            @click="next()"
                        />
                    </div>
                </div>
            </div>
        </div>
        <div class="right" id="play1"></div>
    </div>
</template>
<script>
import { Chart } from '@antv/g2';
export default {
    data() {
        return {
            oss: "http://jjjt.oss-cn-shanghai.aliyuncs.com/",
            temp: {
                section_id: localStorage.getItem("section_id"),
                pageSize: 9,
                pageNo: 1,
            },
            list: "",
            url: "",
            decoder: "",
            accessToken: "",
            CountMonitoring: ""
        };
    },
    created() {


        this.accessToken = localStorage.getItem("videoToken");

    },
    mounted() {
        this.$api
            .MonitoringCountMonitoring({
                section_id: localStorage.getItem("section_id"),
            })
            .then((res) => {
                this.CountMonitoring = res.data;
                console.log(res.data);
            })
            .catch((error) => {
                console.log("错误:", error);
            });



        this.$api
            .MonitoringFindMonitoringByPage(this.temp)
            .then((res) => {
                let data = res.data.items;
                console.log(data)
                for (let i = 0; i < data.length; i++) {
                    this.url += data[i].monitoringUrl + ","
                }
                this.decoder = new EZUIKit.EZUIPlayer({
                    id: "play1",
                    autoplay: true,
                    url: this.url,
                    accessToken: this.accessToken,
                    decoderPath: "/static/ezui",
                    width: 1548,
                    height: 903,
                    splitBasis: 3,
                });
                this.list = data;
            })
            .catch((error) => {
                console.log("错误:", error);
            });
        // 监控

        // setTimeout(this.getplay(), 5000)

    },
    destroyed() {
        console.log("关闭");
        this.onStop();
    },
    methods: {

        next() {
            // if (this.temp.pageNo >= 2) {
            //     return;
            // }
            this.temp.pageNo += 1;

            this.$api
                .MonitoringFindMonitoringByPage(this.temp)
                .then((res) => {
                    let data = res.data.items;
                    console.log(data)
                    this.url = "";
                    for (let i = 0; i < data.length; i++) {
                        this.url += data[i].monitoringUrl + ","
                        console.log(this.url)
                    }


                    console.log(this.url)

                    this.onStop();
                    this.decoder = new EZUIKit.EZUIPlayer({
                        id: "play1",
                        autoplay: true,
                        url: this.url,
                        accessToken: this.accessToken,
                        decoderPath: "/static/ezui",
                        width: 1548,
                        height: 903,
                        splitBasis: 3,
                    });
                    this.list = data;
                })
                .catch((error) => {
                    console.log("错误:", error);
                });
        },
        back() {

            // if (this.temp.pageNo <= 1) {
            //     return;
            // }
            this.temp.pageNo -= 1;


            this.$api
                .MonitoringFindMonitoringByPage(this.temp)
                .then((res) => {
                    let data = res.data.items;
                    console.log(data)
                    for (let i = 0; i < data.length; i++) {
                        this.url += data[i].monitoringUrl + ","
                        console.log(this.url)
                    }

                    this.onStop();
                    console.log(this.url)
                    this.decoder = new EZUIKit.EZUIPlayer({
                        id: "play1",
                        autoplay: true,
                        url: this.url,
                        accessToken: this.accessToken,
                        decoderPath: "/static/ezui",
                        width: 1548,
                        height: 903,
                        splitBasis: 3,
                    });
                    this.list = data;
                })
                .catch((error) => {
                    console.log("错误:", error);
                });

        },
        // 指定进度条文字
        format(percentage) {
            if (percentage == 0) {
                return "故障\n0";
            }
            return percentage === 100 ? "正常\n" + this.CountMonitoring : `${percentage}%`;
        },

        format3(percentage) {
            if (percentage == 100) {
                return "故障\n0";
            }
        },

        format1(percentage) {
            if (percentage == 0) {
                return "故障\n0";
            }
            return percentage === 100 ? "正常\n" + this.o_o : `${percentage}%`;
        },
        // bingtu

        // 监控

        getplay() {
            // ll

            console.log(this.url)
            this.decoder = new EZUIKit.EZUIPlayer({
                id: "play1",
                autoplay: true,
                url: this.url,
                accessToken: this.accessToken,
                decoderPath: "/static/ezui",
                width: 1548,
                height: 903,
                splitBasis: 3,
            });
        },


        onStop() {
            this.decoder.stop();
        },
        // 隐患类型分析 
        bingtu() {

            // count_App/CountQualityshowByRiskId 

            // count_App/CountQualityshowByRiskId

            this.$api
                .count_AppCountQualityshowByRiskId({ section_id: localStorage.getItem("section_id") }).then((res) => {
                    let data = res.data.data;

                    //  const data = [
                    //             { item: '事例一', count: 40, percent: 0.4 },
                    //             { item: '事例二', count: 21, percent: 0.21 },
                    //             { item: '事例三', count: 17, percent: 0.17 },
                    //             { item: '事例四', count: 13, percent: 0.13 },
                    //             { item: '事例五', count: 9, percent: 0.09 },
                    //         ];




                    let sum = 0;
                    for (let i = 0; i < data.length; i++) {
                        // data[i].percent = 0.04;
                        // data[i]
                        sum += parseInt(data[i].count)
                    }
                    for (let i = 0; i < data.length; i++) {
                        data[i].percent = (parseInt(data[i].count) / sum).toFixed(2) - 0.001;
                        // data[i]
                        data[i].percent = data[i].percent;
                        // console.log(data[i].percent);
                        // sum += parseInt(data[i].count)
                    }
                    console.log(data);
                    const chart = new Chart({
                        container: 'container3',
                        autoFit: true,
                        height: 240,
                    });

                    chart.coordinate('theta', {
                        radius: 0.75,
                    });

                    chart.data(data);

                    // chart.scale('percent', {
                    //     formatter: (val) => {
                    //         val = val * 100 + '%';
                    //         return val;
                    //     },
                    // });

                    chart.tooltip({
                        showTitle: false,
                        showMarkers: false,
                    });
                    // ${data.percent * 100}: %
                    chart
                        .interval()
                        .position('percent')
                        .color('quality_name')
                        .label('percent', {
                            content: (data) => {
                                return `${data.quality_name}`;
                            },
                        })
                        .adjust('stack');

                    chart.interaction('element-active');

                    chart.render();


                }).catch((err) => {

                })




        },

        // 分包单位隐患分析
        aff() {
            const data = [
                { item: '事例一', count: 40, percent: 0.4 },
                { item: '事例二', count: 21, percent: 0.21 },
                { item: '事例三', count: 17, percent: 0.17 },
                { item: '事例四', count: 13, percent: 0.13 },
                { item: '事例五', count: 9, percent: 0.09 },
            ];


            this.$api
                .count_AppCountQualityshowBySubId({ section_id: localStorage.getItem("section_id") }).then((res) => {
                    let data = res.data.data;
                    let sum = 0;
                    for (let i = 0; i < data.length; i++) {
                        // data[i].percent = 0.04;
                        // data[i]
                        sum += parseInt(data[i].count)
                    }
                    for (let i = 0; i < data.length; i++) {
                        data[i].percent = (parseInt(data[i].count) / sum).toFixed(2) - 0.001;
                        // data[i]
                        data[i].percent = data[i].percent;
                        // console.log(data[i].percent);
                        // sum += parseInt(data[i].count)
                    }
                    // console.log(sum);
                    // console.log(data);

                    const chart = new Chart({
                        container: 'container4',
                        autoFit: true,
                        height: 240,
                        padding: [0, 0, 0, 0],
                        appendPadding: [0, 0, 0, 200],
                    });
                    // 新建一个 view 用来单独渲染Annotation
                    const innerView = chart.createView();
                    chart.coordinate('theta', {
                        radius: 0.75,
                        innerRadius: 0.75,
                    });

                    chart.data(data);


                    // chart.scale('percent', {
                    //     formatter: val => {
                    //         val = val * 100 + '%';
                    //         return val;
                    //     },
                    // });

                    chart.tooltip(false);

                    // 声明需要进行自定义图例字段： 'item'
                    chart.legend('sub_name', {
                        position: 'left',                                  // 配置图例显示位置
                        custom: true,                                       // 关键字段，告诉 G2，要使用自定义的图例
                        items: data.map((obj, index) => {
                            return {
                                name: obj.sub_name,                                 // 对应 itemName
                                // value: obj.percent,                             // 对应 itemValue
                                marker: {
                                    symbol: 'circle',                             // marker 的形状
                                    style: {
                                        r: 5,                                       // marker 图形半径
                                        fill: chart.getTheme().colors10[index],     // marker 颜色，使用默认颜色，同图形对应
                                    },
                                },                                              // marker 配置
                            };
                        }),
                        sub_name: {
                            style: {
                                fill: '#999',
                            },                                               // 配置 itemValue 样式
                            formatter: val => `${val}`                // 格式化 itemValue 内容
                        },
                    });

                    chart
                        .interval()
                        .adjust('stack')
                        .position('percent')
                        .color('sub_name')
                        .style({
                            fillOpacity: 1,
                        })
                        .state({
                            active: {
                                style: element => {
                                    const shape = element.shape;
                                    return {
                                        lineWidth: 2,
                                        stroke: shape.attr('fill'),
                                        strokeOpacity: shape.attr('fillOpacity'),
                                    };
                                },
                            },
                        });

                    // 移除图例点击过滤交互
                    chart.removeInteraction('legend-filter');
                    chart.interaction('element-active');

                    chart.render();

                    // 监听 element 上状态的变化来动态更新 Annotation 信息
                    chart.on('element:statechange', (ev) => {
                        const { state, stateStatus, element } = ev.gEvent.originalEvent;

                        // 本示例只需要监听 active 的状态变化
                        if (state === 'active') {
                            const data = element.getData();
                            if (stateStatus) {
                                // 更新 Annotation
                                updateAnnotation(data);
                            } else {
                                // 隐藏 Annotation
                                clearAnnotation();
                            }
                        }
                    });

                    // 绘制 annotation
                    let lastItem;
                    function updateAnnotation(data) {
                        if (data.sub_name !== lastItem) {
                            innerView.annotation().clear(true);
                            innerView
                                .annotation()
                                .text({
                                    position: ['50%', '50%'],
                                    content: data.sub_name,
                                    style: {
                                        fontSize: 20,
                                        fill: '#8c8c8c',
                                        textAlign: 'center',
                                    },
                                    offsetY: -20,
                                })
                                .text({
                                    position: ['50%', '50%'],
                                    // content: data.count,
                                    style: {
                                        fontSize: 28,
                                        fill: '#8c8c8c',
                                        textAlign: 'center',
                                    },
                                    offsetX: -10,
                                    offsetY: 20,
                                })
                                .text({
                                    position: ['50%', '50%'],
                                    // content: '台',
                                    style: {
                                        fontSize: 20,
                                        fill: '#8c8c8c',
                                        textAlign: 'center',
                                    },
                                    offsetY: 20,
                                    offsetX: 20,
                                });
                            innerView.render(true);
                            lastItem = data.sub_name;
                        }
                    }

                    // 清空 annotation
                    function clearAnnotation() {
                        innerView.annotation().clear(true);
                        innerView.render(true);
                        lastItem = null;
                    }
                }).catch((err) => {

                })





        },


        // 整改情况分析
        zgfx() {
            this.$api
                .count_AppCountQualityshow({ section_id: localStorage.getItem("section_id") })
                .then((res) => {

                    const data = [
                        { item: '已整改', count: 40, percent: 0 },
                        { item: '未整改', count: 21, percent: 0 },
                        { item: '超期未整改', count: 17, percent: 0 },
                        // { item: '事例四', count: 13, percent: 0.13 },
                        // { item: '事例五', count: 9, percent: 0.09 },
                    ];
                    let arrly = res.data.data;

                    // console.log(arrly)
                    this.arrly = arrly;
                    data[0].count = arrly.CountYZG;
                    data[0].percent = (arrly.CountYZG / arrly.CountAll).toFixed(2) - 0.0001;
                    // console.log(data[0].percent)
                    data[1].count = arrly.CountWZG;
                    data[1].percent = (arrly.CountWZG / arrly.CountAll).toFixed(2);
                    data[2].count = arrly.CountCQWZG;
                    data[2].percent = (arrly.CountCQWZG / arrly.CountAll).toFixed(2);


                    const chart = new Chart({
                        container: 'container2',
                        autoFit: true,
                        height: 240
                    });
                    // 新建一个 view 用来单独渲染Annotation
                    const innerView = chart.createView();
                    chart.coordinate('theta', {
                        radius: 0.75,
                        innerRadius: 0.75,
                    });

                    chart.data(data);

                    chart.scale('percent', {
                        formatter: val => {
                            val = val * 100 + '%';
                            return val;
                        },
                    });

                    chart.tooltip(false);

                    // 声明需要进行自定义图例字段： 'item'
                    chart.legend('item', {
                        position: 'right',                                  // 配置图例显示位置
                        custom: true,                                       // 关键字段，告诉 G2，要使用自定义的图例
                        items: data.map((obj, index) => {
                            return {
                                name: obj.item,                                 // 对应 itemName
                                value: obj.percent,                             // 对应 itemValue
                                marker: {
                                    symbol: 'square',                             // marker 的形状
                                    style: {
                                        r: 5,                                       // marker 图形半径
                                        fill: chart.getTheme().colors10[index],     // marker 颜色，使用默认颜色，同图形对应
                                    },
                                },                                              // marker 配置
                            };
                        }),
                        itemValue: {
                            style: {
                                fill: '#999',
                            },                                               // 配置 itemValue 样式
                            formatter: val => `${val * 100}%`                // 格式化 itemValue 内容
                        },
                    });

                    chart
                        .interval()
                        .adjust('stack')
                        .position('percent')
                        .color('item')
                        .style({
                            fillOpacity: 1,
                        })
                        .state({
                            active: {
                                style: element => {
                                    const shape = element.shape;
                                    return {
                                        lineWidth: 10,
                                        stroke: shape.attr('fill'),
                                        strokeOpacity: shape.attr('fillOpacity'),
                                    };
                                },
                            },
                        });

                    // 移除图例点击过滤交互
                    chart.removeInteraction('legend-filter');
                    chart.interaction('element-active');

                    chart.render();

                    // 监听 element 上状态的变化来动态更新 Annotation 信息
                    chart.on('element:statechange', (ev) => {
                        const { state, stateStatus, element } = ev.gEvent.originalEvent;

                        // 本示例只需要监听 active 的状态变化
                        if (state === 'active') {
                            const data = element.getData();
                            if (stateStatus) {
                                // 更新 Annotation
                                updateAnnotation(data);
                            } else {
                                // 隐藏 Annotation
                                clearAnnotation();
                            }
                        }
                    });

                    // 绘制 annotation
                    let lastItem;
                    function updateAnnotation(data) {
                        if (data.item !== lastItem) {
                            innerView.annotation().clear(true);
                            innerView
                                .annotation()
                                .text({
                                    position: ['50%', '50%'],
                                    content: data.item,
                                    style: {
                                        fontSize: 20,
                                        fill: '#8c8c8c',
                                        textAlign: 'center',
                                    },
                                    offsetY: -20,
                                })
                                .text({
                                    position: ['50%', '50%'],
                                    content: data.count,
                                    style: {
                                        fontSize: 28,
                                        fill: '#8c8c8c',
                                        textAlign: 'center',
                                    },
                                    offsetX: -10,
                                    offsetY: 20,
                                })
                                .text({
                                    position: ['50%', '50%'],
                                    content: '个',
                                    style: {
                                        fontSize: 20,
                                        fill: '#8c8c8c',
                                        textAlign: 'center',
                                    },
                                    offsetY: 20,
                                    offsetX: 20,
                                });
                            innerView.render(true);
                            lastItem = data.item;
                        }
                    }

                    // 清空 annotation
                    function clearAnnotation() {
                        innerView.annotation().clear(true);
                        innerView.render(true);
                        lastItem = null;
                    }


                    // this.chanZ = data;
                })
                .catch((error) => {
                    console.log("错误:", error);
                });



        },

        // 隐患分析
        chanZhi() {
            this.$api
                .count_PCRiskshowByMonth({ section_id: localStorage.getItem("section_id"), station_id: localStorage.getItem("station_id") })
                .then((res) => {
                    let data = res.data;

                    // console.log(data);

                    // console.log(data)
                    const chart = new Chart({
                        container: 'container1',
                        autoFit: true,
                        height: 240,
                        padding: [30, 20, 70, 30]
                    });

                    chart.data(data);
                    chart.scale({
                        value: {
                            min: 0,
                            max: 5,
                            alias: "实际产值"
                        },
                        // planValue: {
                        //     min: 0,
                        //     max: 10,
                        //     alias: "计划产值"
                        // }
                    });



                    chart.tooltip({
                        showCrosshairs: false,
                        shared: true,
                    });


                    // chart.label('monthValue', (xValue) => {
                    //         return {
                    //             content: xValue + '%',
                    //         };
                    //     });

                    chart.axis(true);  // 是否显示坐标轴
                    // chart.axis('nlp', false);

                    // chart.legend({
                    //     custom: true,
                    //     items: [
                    //         { name: '实际产值', value: 'value', marker: { symbol: 'line', style: { stroke: '#51EDE4', lineWidth: 2 } } },
                    //         // { name: '计划产值', value: 'planValue', marker: { symbol: 'line', style: { stroke: '#1A9BFE', lineWidth: 2 } } },
                    //     ],
                    //     // itemFormatter() {
                    //     //     return val; // val 为每个图例项的文本值
                    //     // }
                    // });

                    // chart.legend(false); 
                    //{数据源名称：替换的名称}
                    // chart.legend('monthValue', {
                    //     itemFormatter(val) {
                    //         return "1234"; // val 为每个图例项的文本值
                    //     }
                    // });





                    chart.line().position('month*value').color('#51EDE4').shape('smooth');;
                    // chart.line().position('time*planValue').color('#1A9BFE').shape('smooth');;
                    chart.removeInteraction('legend-filter'); // 自定义图例，移除默认的分类图例筛选交互
                    chart.render();
                })
                .catch((error) => {
                    console.log("错误:", error);
                });
        }

    },
};
</script>
<style src="./css/page09.css" scoped>
</style>
